import React, { useEffect, useState } from "react";
import "../assets/sass/home_page/toolbar/toolbar.css";

const ToolBar = () => {
  const [showTop, setShowTop] = useState(false);
  const [buyPopupShow, setBuyPoputShow] = useState(null);
  useEffect(() => {
    (async () => {
      setBuyPoputShow(false);
      window.addEventListener("scroll", () => {
        if (window.scrollY >= 120) {
          setShowTop(true);
        } else {
          setShowTop(false);
        }
      });
    })();
  }, []);

  const buyEnter = () => {
    setBuyPoputShow(true);
  };
  const buyLeave = () => {
    setBuyPoputShow(false);
  };

  //返回顶部
  const backTop = () => {
    console.log("backtop");

    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };
  return (
    <div className="tool_bar">
      <div className="collection"></div>
      <div className="member">
        <div className="member_tip">全场模板免费用</div>
      </div>
      <div className="buy" onMouseEnter={buyEnter} onMouseLeave={buyLeave}>
        {buyPopupShow && (
          <div className="buy_popup">
            <div className="avatar">
              <img src="/src/assets/image/home_page/toolbar/buy/avatar.png" />
            </div>
            <p className="text_1">Hi，我是您的专属项目顾问</p>
            <p className="text_2">获取企业解决方案</p>
            <div className="code">
              <img src="/src/assets/image/home_page/toolbar/buy/code.webp" />
            </div>
            <p className="text_3">立即扫码，真人咨询</p>
          </div>
        )}
      </div>
      <div className="help"></div>
      <div className="customer">
        <div className="icon">
          <img src="/src/assets/image/home_page/toolbar/customer.png" />
        </div>
        <div className="text">客服</div>
      </div>
      <div className="opinion">
        <div className="icon">
          <img src="/src/assets/image/home_page/toolbar/opinion.png" />
        </div>
        <div className="text">意见</div>
      </div>
      {showTop && (
        <div className="back_top" onClick={backTop}>
          <div className="icon">
            <img src="/src/assets/image/home_page/toolbar/top.png" />
          </div>
          <div className="text">置顶</div>
        </div>
      )}
    </div>
  );
};

export default ToolBar;
